<template>
  <div class="content">
    <div class="content-box">
      <div class="content-left">
        <div
          style="width:100%;font-size: 18px;font-family: PingFang SC;font-weight: bold;color: #555555;display: flex;align-items: center;height: 18px">
          <img style="margin-right: 5px" src="../../../assets/icon-11.png">
          各生育期土壤含水量
        </div>
        <div style="height: 380px;border-right: 1px solid #EAEDF3;width: 100%;">
          <div style="width: 100%; height: 100%" id="analysis"></div>
        </div>
      </div>
      <div class="content-content">
        <div
          style="width:100%;font-size: 18px;font-family: PingFang SC;font-weight: bold;color: #555555;display: flex;align-items: center;height: 18px">
          <img style="margin-right: 5px" src="../../../assets/icon-11.png">
          作物需水量和腾发量
        </div>
        <div style="height: 380px;border-right: 1px solid #EAEDF3;width: 100%;">
          <div style="width: 100%; height: 100%" id="crop"></div>
        </div>
      </div>
      <div class="content-right">
        <div
          style="width:100%;font-size: 18px;font-family: PingFang SC;font-weight: bold;color: #555555;display: flex;align-items: center;height: 18px">
          <img style="margin-right: 5px" src="../../../assets/icon-11.png">
          各生长期数值
        </div>
        <div style="height: 380px;width: 100%;">
          <a-table style="width: 100%;height: 100%;margin-top: 20px" :columns="columns" :data-source="list"
                   :pagination="false" bordered>
          </a-table>
        </div>
      </div>
    </div>
    <div class="content-box" style="justify-content: left">
      <div class="content-left">
        <div
          style="width:100%;font-size: 18px;font-family: PingFang SC;font-weight: bold;color: #555555;display: flex;align-items: center;height: 18px">
          <img style="margin-right: 5px" src="../../../assets/icon-11.png">
          需肥规律
        </div>
        <div style="height: 380px;width: 100%;border-right: 1px solid #EAEDF3;">
          <div style="width: 100%; height: 100%;" id="demand"></div>
        </div>
      </div>
      <div class="content-left" style="margin-left: 18px;width: 67%">
        <div
          style="width:100%;font-size: 18px;font-family: PingFang SC;font-weight: bold;color: #555555;display: flex;align-items: center;height: 18px">
          <img style="margin-right: 5px" src="../../../assets/icon-11.png">
          肥液浓度
        </div>
        <div style="height: 380px;width: 100%;">
          <div style="width: 1088px; height: 100%" id="concentration"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: ' ',
    dataIndex: 'name',
  },
  {
    title: '播种期',
    dataIndex: 'age',
  },
  {
    title: '苗期',
    dataIndex: 'address',
  },
  {
    title: '拔节期',
    dataIndex: 'tags',
  },
  {
    title: '抽穗期',
    dataIndex: 'term',
  },
  {
    title: '灌浆期',
    dataIndex: 'long',
  }
];
export default {
  data() {
    return {
      list: [
        {
          name: '温度 ℃',
          age: '10-12',
          address: '18-20',
          tags: '24-26',
          term: '25-27',
          long: '22-24'
        },
        {
          name: '水分 %',
          age: '60-70',
          address: '60左右',
          tags: '70-80',
          term: '80左',
          long: '75%左右'
        },
        {
          name: '天数 d',
          age: '-',
          address: '65',
          tags: '20',
          term: '18',
          long: '50'
        },
        {
          name: '需水量 mm',
          age: '-',
          address: '144.20',
          tags: '121.00',
          term: '127.90',
          long: '262.10'
        },
        {
          name: '腾发两 mm',
          age: '-',
          address: '14.17',
          tags: '46.62',
          term: '143.95',
          long: '80.20'
        },
      ],
      columns,
    };
  },
  mounted() {
    this.analysis()
    this.crop()
    this.demand()
    this.concentration()
  },
  methods: {
    // 折线图
    analysis() {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('analysis') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)
      let color = ['#5391FF']
      let xAxisData = ['苗期', '拔节期', '抽穗期', '灌浆期']
      let yAxisData1 = [2, '2', '3', '4']
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = ''
        let reg = /^#[\da-f]{6}$/i
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
            '0x' + hex.slice(5, 7)
          )},${opacity})`
        }
        return rgbaColor
      }
      myChart.setOption({
        grid: {
          left: '5%',
          bottom: '18%',
          top: '20%',
          right: '15%'
        },
        color: color,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: 'axis',
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#333'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5391FF'
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '水分',
            axisLabel: {
              textStyle: {
                color: '#666'
              }
            },
            nameTextStyle: {
              color: '#666',
              fontSize: 12,
              lineHeight: 40
            },
            // 分割线
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8
              }
            },
            symbol: 'circle', //数据交叉点样式
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10
              }
            },
            data: yAxisData1
          },
        ]
      })
    },
    crop() {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('crop') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '13%',
          bottom: '14%',
          top: '18%',
          containLabel: true
        },
        legend: {
          data: ['需水量', '腾发量'],

          top: '5%',
          textStyle: {
            color: "#666666"
          },
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 25
        },
        xAxis: {
          type: 'category',
          data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
          axisLine: {
            lineStyle: {
              color: '#cdd5e2'

            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
        },
        yAxis: [{
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#F68D05'
            }
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
        },
          {
            type: "value",
            name: "腾发量(mm)",
            nameTextStyle: {
              color: "#666666"
            },
            position: "right",
            axisLine: {
              lineStyle: {
                color: '#F68D05'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#666666"
              }
            }
          },
          {
            type: "value",
            name: "需水量(mm)",
            nameTextStyle: {
              color: "#666666"
            },
            position: "left",
            axisLine: {
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#666666"
              }
            }
          }
        ],
        series: [{
          name: '需水量',
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#5F98FB'
              }, {
                offset: 1,
                color: '#B1CCFC'
              }]),
              barBorderRadius: 6,
            },
          },
          data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
        },
          , {
            name: "腾发量",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示

            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: '#ffa43a',
                borderColor: 'rgba(255, 234, 0, 0.5)',  //圆点透明 边框
                borderWidth: 5
              },

            },
            lineStyle: {
              color: "#ffa43a"
            },

            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
          }
        ]
      })
    },
    demand() {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('demand') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)
      var colorList = ['#65C15C', '#FFA630', '#3B7CFE']
      myChart.setOption({
        title: {
          text: '高产玉米形成100公斤籽粒氮、磷、钾需求量',
          x: 'center',
          y: 'top',
          top: 30,
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['24%', '45%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: true,
            position: 'outside',
            // formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 3,
                width: 3,
                height: 3,
                padding: [3, 3, 0, -12]
              },
              a: {
                padding: [-30, 15, -20, 15]
              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1
              }
            }
          },
          data: [{
            'name': '磷: 1kg',
            'value': 1
          }, {
            'name': '氮: 3kg',
            'value': 3
          }, {
            'name': '钾: 2.5kg',
            'value': 2.5
          }
          ],
        }]
      })
    },
    concentration() {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('concentration') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)

      myChart.setOption({
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '5%',
          right: '3%',
          bottom: '24%',
          top: '20%'
        },
        legend: {
          data: ['1号施肥机EC值', '2号施肥机EC值', '3号施肥机EC值', '4号施肥机EC值'],
          right: '2%',
          top: '2%',
          textStyle: {
            color: "#666666"
          },
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 25
        },
        xAxis: {
          type: 'category',
          data: ['1','2','3','4','5','6','7','8','9'],
          axisLine: {
            lineStyle: {
              color: '#cdd5e2'

            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
        },

        yAxis: [{
          name: "EC值",
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#666666'
            }
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },

        },
          {
            type: "value",
            name: "PH值",
            nameTextStyle: {
              color: "#666666"
            },
            position: "right",
            axisLine: {
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#666666"
              }
            }
          }
        ],
        series: [{
          name: '1号施肥机EC值',
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#29acff'
              }, {
                offset: 1,
                color: '#4bdfff'
              }]),
              barBorderRadius: 6,
            },
          },
          data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
        },
          {
            name: '2号施肥机EC值',
            type: 'bar',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#3d93f2'
                }, {
                  offset: 1,
                  color: '#5dc1fd'
                }]),
                barBorderRadius: 6,
              }

            },
            data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
          },
          {
            name: '3号施肥机EC值',
            type: 'line',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#01c871'
                }, {
                  offset: 1,
                  color: '#55f49c'
                }]),
                barBorderRadius: 6,
              }
            },
            data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
          }, {
            name: "4号施肥机EC值",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示

            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: '#ffa43a',
                borderColor: 'rgba(255, 234, 0, 0.5)',  //圆点透明 边框
                borderWidth: 5
              },

            },
            lineStyle: {
              color: "#ffa43a"
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 88%;
  display: flex;
  flex-wrap: wrap;
}

.content-box {
  width: 100%;
  height: 440px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 22px;
}

.content-box div {
  width: 32.5%;
  height: 100%;
}

</style>